<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box01">
        <button>按键1</button>
        <button>按键2</button>
        <button>按键3</button>
        <p id="text"></p>
    </div>
    <div id="box02">
        <button>按键1</button>
        <button>按键2</button>
        <button>按键3</button>
        <p id="text1"></p>
    </div>
    
</body>
</html>
<script>
    //获取元素
    var text = document.querySelector("#text");
    var text1 = document.querySelector("#text1");
    var box01 =document.querySelector("#box01");
    var box02 =document.querySelector("#box02");
    var box03 =document.querySelector("#box03");

    box01.onclick = function(){
        var btns = document.getElementsByTagName('button');
        for(let i = 0;i<btns.length;i++){
            var btn = btns[i];
            btn.onclick = function(){
                console.log("第"+(i+1)+"个");
                if(i+1 === 1){
                    text.innerHTML = "1";
                }
                if(i+1 === 2){
                    text.innerHTML = "2";
                }
                if(i+1 === 3){
                    text.innerHTML = "3";
                }
            }
        }
        
    }

    box02.onclick = function(){
        var btns = document.getElementsByTagName('button');
        for(let i = 0;i<btns.length;i++){
            var btn = btns[i];
            btn.onclick = function(){
                console.log("第"+(i+1)+"个");
                if(i+1 === 4){
                    text1.innerHTML = "1";
                }
                if(i+1 ===5){
                    text1.innerHTML = "2";
                }
                if(i+1 === 6){
                    text1.innerHTML = "3";
                }
            }
        }
        
        setTimeout
    }



    function fn(){
       
    }
</script>.